<template>
  <div v-if="modelValue" class="custom-v-model">
    <h2>自定义 v-model</h2>
    <p>父组件传递的值：{{ modelValue }} - {{ textModelValue }}</p>
    <button @click="modelValue = !modelValue">关闭</button>
    <input type="text" :value="textModelValue" @change="inputChange" />
  </div>
</template>

<script setup lang="ts">
const modelValue = defineModel<boolean>({ required: true })
const [textModelValue, textModelModifiers] = defineModel<string>('textModel', {
  default: '',
  set: (val) => {
    if (textModelModifiers?.trim) {
      return val.trim()
    }
    return val
  },
})
const inputChange = (e: Event) => {
  const target = e.target as HTMLInputElement
  textModelValue.value = target.value
}
</script>

<style scoped lang="scss"></style>
